<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">记账</block>
		</cu-custom>
		<view>
			<view class="cu-form-group margin-top">
				<view class="title">员工</view>
				<picker @change="PickerChange($event,'index')" :value="index" :range="picker" range-key="name">
					<view class="picker">
						{{index>-1?picker[index].name:'请选择员工'}}
					</view>
				</picker>
			</view>

			<view class="cu-form-group">
				<view class="title">日期</view>
				<picker mode="date" :value="date" start="2020-01-01" end="2100-12-31" @change="DateChange">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view>

			<view class="cu-form-group align-start">
				<view class="title">内容</view>
				<textarea maxlength="-1" :disabled="modalName!=null" @input="textareaBInput" placeholder="请输入内容"></textarea>
			</view>

			<view class="cu-form-group">
				<view class="title">金额</view>
				<input placeholder="请输入金额" type="number" v-model="money" maxlength="10"></input>
			</view>

			<view class="cu-form-group align-start">
				<view class="title">备注</view>
				<textarea maxlength="200" placeholder="备注可不填" v-model="remark"></textarea>
			</view>

			<view class="padding">
				<button class="cu-btn block bg-gradual-pink margin-tb-sm lg" @click="save()">确定</button>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: -1,
				picker: [],
				date: '',
				modalName: null,
				personnel_id:'',
				remark:'',
				content:'',
				money:'',
			}
		},
		onLoad() {
			this.addData();
			this.personnel();
		},
		methods: {
			//提交
			save: async function() {
				if(!this.personnel_id){
					this.$common.errorToShow('请选择员工！');
					return;
				}
				if(!this.date){
					this.$common.errorToShow('请选择日期！');
					return;
				}
				if(!this.content){
					this.$common.errorToShow('请填写内容！');
					return;
				}
				if(!this.money){
					this.$common.errorToShow('请输入金额！');
					return;
				}
				if(!this.remark){
					this.remark = '无';
				}
				let result = await this.$api.keepbook({
					personnel_id:this.personnel_id,
					date:this.date,
					content:this.content,
					money:this.money,
					remark:this.remark
				});
				if(result.code == 1){
					this.$common.successToShow(result.msg);
					return;
				}else{
					this.$common.errorToShow(result.msg);
					return;
				}
			},
			// 员工
			personnel: async function() {
				let result = await this.$api.personnel({});
				if (result.code == 1) {
					let list = result.data
					list.forEach(item => {
						this.picker.push({
							id:item.id,
							name:item.username
						})
					});
				}
			},
			// 日期
			addData: async function() {
				let nowDate = new Date();
				let isDate = {
					year: nowDate.getFullYear(),
					month: nowDate.getMonth() + 1,
					date: nowDate.getDate(),
				}
				if (isDate.month >= 1 && isDate.month <= 9) {
					isDate.month = '0' + isDate.month;
				}
				if (isDate.date >= 0 && isDate.date <= 9) {
					isDate.date = '0' + isDate.date;
				}
				let systemDate = isDate.year + '-' + isDate.month + '-' + isDate.date;
				this.date = systemDate;
			},
			DateChange(e) {
				this.date = e.detail.value
			},
			PickerChange(e) {
				//console.log(this.picker[e.target.value].id)
				if(e.target.value >= 0){
					this.personnel_id = this.picker[e.target.value].id;
				}
				this.index = e.detail.value;
			},
			textareaBInput(e) {
				this.content = e.detail.value;
				this.textareaBValue = e.detail.value;
			}
		}
	}
</script>

<style>
</style>
